<template>
    <div class="header">
        <div class="header_img">
            乌海及其周边地区污染源成因及其对策大数据分析平台
        </div>
        <ul>
            <template v-for="item in menu">
                <li :key="item.id" :style="{ background: active == item.module ? 'url(' + baseimg + ')'+' center center / 100% 100% no-repeat' : ''}" :class="{active:active == item.module}" @click="handClick(item)">{{ item.name }}</li>
            </template>
        </ul>
    </div>
</template>

<script>
import menuConfig from '../../config/menuConfig2';
export default {
  name:'Header',
  data() {
    return {
      menu: [],
      baseimg: require('../../assets/images/1.png'),
      active: 'home',
    };
  },
  methods: {
    handClick(item) {
      this.$router.push({
        //核心语句
        path: item.path //跳转的路径
      });
      this.active = item.module;
      this.baseimg = require('../../assets/headimg/' + item.icon);
    }
  },
  mounted() {
    this.menu = menuConfig;
  }
};
</script>

<style scoped>

</style>